<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">订单管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/noOrderPay' }">
          <div class="div2">无订单支付</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="query">
      <p class="header">设置微信支付二维码</p>
      <el-form :inline="true" :model="formInline">
        <el-form-item label="公众号">
          <el-select
            v-model="formInline.official"
            placeholder="公众号"
            size="mini"
          >
            <el-option
              v-for="items in official"
              :key="items.id"
              :label="items.name"
              :value="items.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单金额">
          <el-input
            type="number"
            size="mini"
            v-model="formInline.salay"
            placeholder="订单金额"
            :precision="2"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" @click="generate"
            >生成支付二维码</el-button
          >
          <el-button size="mini" type="success" plain @click="referent"
            >刷新</el-button
          >
          <el-button size="mini" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-table :data="tableData.list" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="80px"
        ></el-table-column>
        <!-- <el-table-column
          prop="date"
          label="订单号"
        ></el-table-column> -->
        <el-table-column
          prop="payId"
          label="微信支付订单号"
          min-width="130px"
        ></el-table-column>
        <!-- <el-table-column
          prop="date"
          label="付款微信号"
          min-width="100px"
        ></el-table-column> -->
        <el-table-column prop="nickName" label="付款人"></el-table-column>
        <el-table-column prop="payMoney" label="支付金额"></el-table-column>
        <el-table-column prop="payStatus" label="支付状态"></el-table-column>
        <el-table-column prop="createdTime" label="支付时间"></el-table-column>
        <el-table-column prop="payeeName" label="收款人"></el-table-column>
      </el-table>
    </div>

    <div style="height: 40px"></div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum > 0">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 分页end -->

    <!-- 二维码弹框 -->
    <el-dialog
      title="微信支付二维码"
      :visible.sync="qrHidden"
      width="50%"
      append-to-body
    >
      <div id="contentQr"></div>

      <!-- <div style='text-align:center;margin-top:40px;' v-if='qrtype == 1 && orderMoney ==0'>注：此二维码只供查看订单使用</div> -->

      <span slot="footer" class="dialog-footer">
        <el-button @click="qrHidden = false" size="mini">取 消</el-button>
        <!-- <el-button type="primary" size="mini" @click="qrHidden = false"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>
    <!-- 二维码弹框 -->
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
export default {
  data () {
    return {
      formInline: {
        official: "",
        salay: "",
      },
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      official: [],
      qrHidden: false,
    };
  },
  created () {
    this.officialEvent();
    this.listAxios();
  },
  methods: {
    referent () {
      this.pageNo = 1;
      this.listAxios();
    },
    // 重置
    reset () {
      this.formInline = {
        official: "",
        salay: "",
      };
    },
    // 公众号列表
    officialEvent () {
      this.axios
        .post(
          "wechat/wx/config/selectWxNameBySales",
          {
            id: JSON.parse(sessionStorage.getItem("salesAuthorityId")),
            type: 1,
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.official = res.data;
          } else {
            this.$message.warning(res.message);
          }
        });
    },

    generate () {
      // 支付二维码
      if (
        !this.formInline.salay ||
        Number(this.formInline.salay).toFixed(2) <= 0
      ) {
        this.$message.warning("请核实订单金额是否正确");
        return;
      } else if (!this.formInline.official) {
        this.$message.warning("公众号选择不能为空");
        return;
      }

      this.axios
        .post("/wechat/wx/pay/getWxQrCode", {
          orderId: "",
          payMoney: Number(this.formInline.salay).toFixed(2),
          type: 3,
          wxId: this.formInline.official,
        })
        .then((res) => {
          if (res.code == 0) {
            this.qrHidden = true;
            this.$nextTick(() => {
              document.getElementById("contentQr").innerHTML = "";
              new QRCode("contentQr", {
                width: 150,
                height: 150,
                text: res.data,
                colorDark: "#000",
                colorLight: "#fff",
              });
            });
          } else {
            this.$message.error(res.message);
          }
        });
    },

    listAxios () {
      this.axios
        .post("order/order/pay/findOnOrderNoList", {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
        })
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },

    // 分页
    handleCurrentChange (val) {
      this.pageNo = val;
      this.listAxios();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.listAxios();
    },
  },
};
</script>
<style lang="scss" scoped>
.div1 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.query {
  width: 98.5%;
  background: #fff;
  padding: 4px 10px;
  .header {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
  }
  /deep/.el-form-item {
    margin-bottom: 10px;
  }
}
.table {
  margin-top: 10px;
  /deep/ .el-table th > .cell {
    color: #666;
  }
}
.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 5;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
#contentQr {
  height: 150px;
  width: 150px;
  margin: 20px auto 10px;
}
</style>